<!--
 * @Descripttion: 首页的组件
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-10 15:13:15
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-13 12:33:20
-->
<template>
  <div class="home" id="home" name="home">
    <el-container>
      <div class="leftmenu" >
        <div class="first" v-for="(item,index) in species" :key="index">
          <h3>{{species[index].name}}</h3>
          <a>{{species[index].pro[0]}} {{species[index].pro[1]}} {{species[index].pro[2]}}</a>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="block">
        <el-carousel height="400px" arrow="always" width="250px">
          <el-carousel-item v-for="item in imgList" :key="item.name">
            <img
              :src="item.src"
              style="height: 400px"
              alt="图片丢失了"
              :title="item.title"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图END -->
      <div class="rightmenu">
        <div v-if="LoginStatus2" style="height: 70px; padding-top: 20px">
          <h5>欢迎您：{{ user[0].account }}</h5>
        </div>
        <div v-if="!LoginStatus2">
          <h5>欢迎来到牛哥驿站平台</h5>
          <el-button type="primary" @click="dialogVisible = true"
            >请登录</el-button
          >
          <el-dialog
            :visible.sync="dialogVisible"
            width="26%"
            :before-close="handleClose"
            @opened="openLogin"
            center
          >
            <!--<div id="login_container"></div>-->
            <el-menu
              :default-active="LoginType"
              class="Login"
              mode="horizontal"
              
            >
              <el-menu-item index="wechatLogin" @click="LoginFlag = true"
                >微信登录</el-menu-item
              >
              <el-menu-item index="phoneLogin" @click="LoginFlag = false"
                >手机号登录</el-menu-item
              >
            </el-menu>
            <div
              v-show="LoginFlag"
              style="width: 230px; height: 230px; margin: auto 10px"
            >
              <p>请用微信扫一扫登录</p>
              <div id="login_container"></div>
            </div>
            <div v-show="!LoginFlag">
              <phoneLogin
                :LoginStatus="LoginStatus"
                @HasLogin="HasLogin"
              ></phoneLogin>
            </div>
          </el-dialog>
          <el-button type="primary" @click="registerFlag = true"
            >免费注册</el-button
          >
          <el-dialog
            :visible.sync="registerFlag"
            width="26%"
            :before-close="handleClose"
            title="注册"
          >
            <el-form>
              <el-form-item>
                <el-row>
                  <el-col :span="4">手机号</el-col>
                  <el-col :span="20">
                    <el-input
                      v-model="register.phone"
                      placeholder="请输入手机号"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="4">密码</el-col>
                  <el-col :span="20">
                    <el-input
                      v-model="register.password"
                      placeholder="请输入密码"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="4">确认密码</el-col>
                  <el-col :span="20">
                    <el-input
                      v-model="register.password2"
                      placeholder="请再次输入密码"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="registerUser">注册</el-button>
            </span>
          </el-dialog>
        </div>
        <div style="color: #c9b9b9; margin-bottom: 20px"></div>
        <el-menu :default-active="actor" mode="horizontal">
          <el-menu-item index="1" @click="flag = true">个人中心</el-menu-item>
          <el-menu-item index="2" @click="flag = false">卖家中心</el-menu-item>
        </el-menu>
        <div class="buyer" v-if="flag">
          <h5>采购管理</h5>
          <h5>订单管理</h5>
          <h5>用户信息</h5>
          <el-link
            :underline="false"
            style="margin-top: 30px; margin-left: 50px"
          >
            <router-link to="/buyer">
              进入买家中心
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </el-link>
        </div>
        <div class="salercenter" v-if="!flag">
          <h5>供应管理</h5>
          <h5>订单管理</h5>
          <h5>店铺管理</h5>
          <el-link
            :underline="false"
            style="margin-top: 30px; margin-left: 50px"
          >
            <router-link to="/saler">
              进入卖家中心
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </el-link>
        </div>
      </div>
    </el-container>
    <div class="main-box">
      <div class="main">
        <el-container>
          <!-- 采购推荐和今日特卖 -->
          <div class="recommend" style="float: left">
            <a style="margin-left: 20px; height: 30px; font-weight: bold">
              采购推荐
              <el-link :underline="false" style="margin-left: 600px">
                <router-link to="/Purchase">更多</router-link>
              </el-link>
            </a>
            <div class="good" v-for="item in purchase" :key="item.id">
              <div class="pre">货品名称：{{ item.species }}</div>
              <div class="pre">
                采购数量：{{ item.quantity }}{{ item.unit }}/{{ item.cycle }}
              </div>
              <div class="pre">收货地：{{ item.expect_source }}</div>
              <el-button
                style="margin-left: 30px; margin-top: 5px"
                size="mini"
                type="primary"
                round
                >查看</el-button
              >
            </div>
          </div>
          <div class="today" style="float: left">
            <a style="margin-left: 20px; height: 30px; font-weight: bold">
              今日特卖
              <el-link :underline="false" style="margin-left: 60px">
                <router-link to="/Goods">更多</router-link>
              </el-link>
            </a>
          </div>
        </el-container>
        <!-- 采购推荐和今日特卖 -->

        <!-- 高端农产品展示区域 -->
        <div class="hot_supply">
          <h3 style="margin-left: 20px; margin-top: 20px">热门供应</h3>
          <el-container>
            <div class="product">
              <h4 style="margin-left: 20px; margin-top: 20px">高端农产品</h4>
            </div>
            <div class="type">
              <h4 style="margin-left: 20px; margin-top: 20px">种类</h4>
              <span v-for="item,id in species[0].pro" :key="id" style="margin-left: 10px">{{
                item
              }}</span>
            </div>
            <div class="goodrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">好货推荐</h4>
              <div>
                <div v-for="item in goodrecommend" :key="item.id">
                  <router-link to="">
                    <div
                      style="
                        border: 1px #000000 solid;
                        margin-left: 10px;
                        width: 170px;
                        float: left;
                      "
                      @click="openProduct"
                    >
                      <img
                        :src="item.src"
                        height="150px"
                        style="margin-left: 10px"
                      />
                      <div style="margin-left: 20px">
                        价格：{{ item.price }}
                      </div>
                      <div class="goodname">产品名称：{{ item.name }}</div>
                    </div>
                  </router-link>
                </div>
              </div>
            </div>
            <div class="supplyrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">推荐供应商</h4>
              <div style="margin-top: 5px; margin-left: 20px">
                <router-link to=""
                  ><div @click="openSupplier">· 公司名称1</div></router-link
                >
              </div>
              <div style="margin-top: 5px; margin-left: 20px">· 公司名称2</div>
            </div>
          </el-container>
          <el-container>
            <div class="product">
              <h4 style="margin-left: 20px; margin-top: 20px">时令鲜果</h4>
            </div>
            <div class="type">
              <h4 style="margin-left: 20px; margin-top: 20px">种类</h4>
              <span v-for="item,id in species[1].pro" :key="id" style="margin-left: 10px">{{
                item
              }}</span>
            </div>
            <div class="goodrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">好货推荐</h4>
            </div>
            <div class="supplyrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">推荐供应商</h4>
            </div>
          </el-container>
          <el-container>
            <div class="product">
              <h4 style="margin-left: 20px; margin-top: 20px">加工品</h4>
            </div>
            <div class="type">
              <h4 style="margin-left: 20px; margin-top: 20px">种类</h4>
              <span v-for="item,id in species[2].pro" :key="id" style="margin-left: 10px">{{
                item
              }}</span>
            </div>
            <div class="goodrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">好货推荐</h4>
            </div>
            <div class="supplyrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">推荐供应商</h4>
            </div>
          </el-container>
          <el-container>
            <div class="product">
              <h4 style="margin-left: 20px; margin-top: 20px">生鲜海产品</h4>
            </div>
            <div class="type">
              <h4 style="margin-left: 20px; margin-top: 20px">种类</h4>
              <span v-for="item,id in species[3].pro" :key="id" style="margin-left: 10px">{{
                item
              }}</span>
            </div>
            <div class="goodrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">好货推荐</h4>
            </div>
            <div class="supplyrecommend">
              <h4 style="margin-left: 20px; margin-top: 20px">推荐供应商</h4>
            </div>
          </el-container>
        </div>
        <!-- 高端农产品展示区域END -->
      </div>
    </div>
  </div>
</template>

<script>
import phoneLogin from "@/components/phoneLogin/phoneLogin.vue";
export default {
  name: "Home",
  components: {
    phoneLogin,
  },
  data() {
    return {
      carousel: "", // 轮播图数据
      flag: "true", //用于组件切换
      actor: "1",
      dialogVisible: false, //用于登录弹窗
      registerFlag: false, //用于注册弹窗
      LoginFlag: true, //用于判断是微信还是手机登录
      LoginType: "wechatLogin",
      LoginStatus: false, //用于判断用户是否登录
      user: [],
      species: [
        {
          name: "高端农产品",
          pro: ["马铃薯", "白菜", "辣椒"],
        },
        {
          name: "时令鲜果",
          pro: ["苹果", "葡萄", "梨"],
        },
        {
          name: "加工品",
          pro: ["蜜饯", "果脯", "肉脯"],
        },
        {
          name: "生鲜海产品",
          pro: ["鱼", "虾", "贝壳"],
        },
      ], //用于轮播图左边商品种类
      imgList: [
        {
          name: "001",
          src: require("@/assets/apple.jpeg"),
          title: "这是苹果.png",
        },
        {
          name: "002",
          src: require("@/assets/banana.jpeg"),
          title: "这是香蕉.png",
        },
        {
          name: "003",
          src: require("@/assets/orange.jpeg"),
          title: "这是橙子.png",
        },
      ],
      goodrecommend: [
        {
          id: 1,
          src: require("@/assets/apple.jpeg"),
          price: "0.35元/斤",
          name: "苹果",
        },
        {
          id: 2,
          src: require("@/assets/banana.jpeg"),
          price: "2.3元/斤",
          name: "香蕉",
        },
      ],
      purchase: [
        {
          species: "苹果",
          quantity: 1,
          unit: "元",
          cycle: "斤",
          expect_source: "广东",
        },
      ], //用于采购商品推荐
      //注册弹窗
      register: { phone: "", password: "", password2: "" },
    };
  },
  props: ["LoginStatus2"],
  methods: {
    openProduct() {
      const { href } = this.$router.resolve({
        name: "product",
        query: { id: 1 },
      });
      window.open(href, "_blank");
    },
    openSupplier() {
      const { href } = this.$router.resolve({
        name: "supplier",
        query: { id: 1 },
      });
      window.open(href, "_blank");
    },
    handleClose(done) {
      done();
      //console.log(this.LoginFlag)
    },
    setWxerwma() {
      const obj = new WxLogin({
        self_redirect: true,
        id: "login_container", // 需要显示的容器id
        appid: "wx*******", // 公众号appid wx*******
        scope: "snsapi_login", // 网页默认即可
        redirect_uri: encodeURIComponent("http://localhost:8080/#/"), // 授权成功后回调的
        state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
        style: "black", // 提供"black"、"white"可选。二维码的样式
        href: "https://static.zcool.cn/passport4.0/css/wxCode.css?v=0.1", // 外部css文件url，需要https
      });
    },
    openLogin() {
      this.setWxerwma();
    },
    HasLogin(flag, user) {
      //与登录组件判断是否已经登录
      this.LoginStatus = flag;
      this.user = user;
      this.$emit("hasLogin", flag, user);
      this.dialogVisible = false;
    },
    //用户注册
    async registerUser() {
      if (this.register.password != this.register.password2) {
        this.$message.error("两次密码不一致");
        return;
      }
      await this.$axios({
        method: "post",
        url: "http://localhost:3000/login_account",
        data: {
          account: this.register.phone,
          account_password: this.register.password,
        },
      }).then((res) => {
        this.$message.success("注册成功");
        this.$router.push("/buyer/self");
      });
    },
  },
  mounted() {
    this.$axios({
      methed: "get",
      url: "http://localhost:3000/purchase_form",
    }).then((res) => {
      this.purchase = res.data;
    });
  },
};
</script>

<style scoped>
.home {
  /* display: inline-block; */
  margin: 0 auto;
}
/* 左侧栏css */
.leftmenu {
  width: 200px;
  height: 400px;
  background: #f8f2f2;
}
.leftmenu h3 {
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.leftmenu a {
  margin-left: 10px;
}
/* 右侧栏css */
.rightmenu {
  width: 200px;
  height: 400px;
  background: #f8f2f2;
}
.rightmenu .el-button {
  margin-left: 5px;
}
.rightmenu h5 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
  text-align: center;
}
/* 轮播图CSS */
.block {
  height: 400px;
  width: 600px;
}

.el-carousel__item:nth-child(2n) {
  margin-left: 100px;
}

.el-carousel__item:nth-child(2n + 1) {
  margin-left: 100px;
}

/* 轮播图CSS END */

/* 采购推荐 */
.main-box .main .recommend {
  background: #f8f2f2;
  height: 300px;
  width: 780px;
  margin-top: 20px;
}
.main-box .main .recommend .good {
  height: 125px;
  float: left;
  width: 130px;
  margin-left: 20px;
  margin-top: 5px;
  border: 1px #000000 solid;
}
.main-box .main .recommend .good .pre {
  font-size: 10px;
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-box .main .today {
  background: #f8f2f2;
  height: 300px;
  width: 200px;
  margin-top: 20px;
  margin-left: 20px;
}
/* 采购推荐 */

/*  商品  */
.main-box .main .hot_supply {
  height: 1400px;
  width: 998px;
  margin-top: 20px;
  border: 1px #000000 solid;
}
.main-box .main .product {
  height: 300px;
  width: 150px;
  margin-top: 20px;
  margin-left: 20px;
  border: 1px #000000 solid;
}
.main-box .main .type {
  height: 300px;
  width: 190px;
  margin-top: 20px;
  border: 1px #000000 solid;
}
.main-box .main .goodrecommend {
  height: 300px;
  width: 400px;
  margin-top: 20px;
  border: 1px #000000 solid;
}
.main-box .main .goodrecommend .goodname {
  margin-left: 20px;
  height: 20px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-box .main .supplyrecommend {
  height: 300px;
  width: 200px;
  margin-top: 20px;
  border: 1px #000000 solid;
}
/* 卖家中心和买家中心*/
.buyer h5,
.salercenter h5 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
  text-align: center;
}
</style>
